<script>
  import { NOOP } from '@web-utils/core'
  import { hasAuthority } from '@/util/auth'

  const builtinButtons = {
    back: { label: '返回', type: 'primary', icon: 'el-icon-arrow-left' },
    cancel: { label: '取消', icon: 'el-icon-close' },
    create: { label: '新增', type: 'primary', icon: 'el-icon-plus' },
    save: { label: '保存', type: 'primary', icon: 'el-icon-takeaway-box', loadable: true },
    withdraw: { label: '提取', type: 'primary', icon: 'el-icon-refresh-left' },
    edit: { label: '编辑', type: 'primary', icon: 'el-icon-edit-outline' },
    submit: { label: '提交审批', type: 'primary', icon: 'el-icon-s-promotion' },
    publish: { label: '发布', type: 'primary', icon: 'el-icon-s-promotion' },
    agree: { label: '同意', type: 'primary', icon: 'el-icon-check' },
    disagree: { label: '不同意', type: 'primary', icon: 'el-icon-close' },
    reject: { label: '退回', type: 'primary', icon: 'el-icon-s-release' },
    finish: { label: '完成', type: 'primary', icon: 'el-icon-circle-check' },
    enable: { label: '启用', type: 'primary', icon: 'el-icon-circle-check' },
    exp: { label: '导出', type: 'primary', icon: 'el-icon-download' },
    imp: { label: '导入', type: 'primary', icon: 'el-icon-upload' },
    del: { label: '删除', type: 'primary', icon: 'el-icon-delete' },
    disabled: { label: '禁用', type: 'primary', icon: 'el-icon-remove-outline' },
    reload: { label: '刷新', icon: 'el-icon-refresh', separateLine: false, circle: true },
    settings: { label: '设置', icon: 'el-icon-s-operation', separateLine: false, circle: true },
    search: { label: '搜索', icon: 'el-icon-search', separateLine: false, circle: true }
  }

  export default {
    name: 'Toolbar',
    provide() {
      return {
        toolbar: this
      }
    },
    props: {
      searchable: Boolean,
      refreshable: Boolean,
      buttons: {
        type: Array,
        default: () => ['back']
      },
      back: Function,
      cancel: Function,
      emitter: {
        type: String,
        default: 'self'
      },
      footer: Boolean,
      label: Object
    },
    methods: {
      goBack() {
        const path = this.$route.path
        this.$bus('closeTab', path, this)
      },
      createButton(key, { label, icon, type, separateLine = true, loadable, circle }) {
        // if (label === '返回' && !this.footer) {
        //   return null
        // }
        let handler
        const buttonLabel = this.label?.[key] || label
        if (!['back', 'cancel'].includes(key)) {
          handler = e => (this.$listeners[key] || NOOP)(e)
        } else {
          handler = this.goBack
        }
        return (
          <ToolbarButton
            separate-line={separateLine}
            icon={icon}
            label={buttonLabel}
            loadable={loadable}
            circle={circle}
            footer={this.footer}
            type={type}
            on-click={handler}
          />
        )
      },
      getLeftButtons() {
        const { createButton } = this
        const toolbarLeft = this.$scopedSlots['toolbar-left']?.()
        const buttons =
          toolbarLeft ||
          this.buttons.flatMap(key => {
            const button = builtinButtons[key]
            if (button) {
              const vNodes = this.$scopedSlots[key]?.()
              return vNodes || createButton(key, button)
            } else if (key === 'slot') {
              return this.$scopedSlots.default?.({ buttons: this.buttons, footer: this.footer }) ?? null
            } else {
              return null
            }
          })

        // 不渲染无权限的按钮
        return buttons?.filter(vNode => {
          if (!vNode?.componentOptions?.propsData.privilege) {
            return true
          } else {
            return hasAuthority(vNode.componentOptions.propsData.privilege)
          }
        })
      },
      getRightButtons() {
        // const vNodes = this.$scopedSlots['toolbar-right']?.() || []
        // vNodes.push(this.getRefreshButton(), this.getSettingsButton(), this.getSearchButton())
        const vNodes = this.$scopedSlots['toolbar-right']?.()
        return vNodes || [this.getRefreshButton(), this.getSettingsButton(), this.getSearchButton()]
      },
      getSearchButton() {
        const { createButton } = this
        return this.searchable ? createButton('search', builtinButtons.search) : null
      },
      getRefreshButton() {
        const { createButton } = this
        return this.refreshable ? createButton('reload', builtinButtons.reload) : null
      },
      getSettingsButton() {
        const { createButton } = this
        return this.refreshable ? createButton('settings', builtinButtons.settings) : null
      }
    },
    render() {
      return this.footer ? (
        <div class="footer-bar">{this.getLeftButtons()}</div>
      ) : (
        <div class="toolbar">
          <div class="toolbar-left">{this.getLeftButtons()}</div>
          <div class="toolbar-right">{this.getRightButtons()}</div>
        </div>
      )
    }
  }
</script>

<style lang="scss">
  .toolbar {
    display: flex;
    height: 40px;
    padding: 0 10px;
    line-height: 40px;
    background-color: white;
    border-bottom: 1px solid #e5e9ec;

    .toolbar-left {
      @include flex-item;

      .el-button {
        [class*=' el-icon-'],
        [class^='el-icon-'] {
          margin-top: -1px;

          // color: var(--color-primary);
          font-size: 15px;
        }
      }
    }

    .toolbar-right {
      .el-button {
        display: inline-flex;
        align-items: center;
      }
    }
  }

  .footer-bar {
    @include flex-row;
    align-items: center;
    justify-content: center;
    padding-top: 10px;

    .el-button {
      padding: 10px 40px;
    }
  }
</style>
